<template>
  <div class="myEditPass">
    <h2>修改密码</h2>
    <el-form label-width="150px" :rules="rules2" :model="ruleForm2" ref="ruleForm2">
      <el-form-item label="当前密码:" prop="oldPass">
        <el-input v-model="ruleForm2.oldPass" size="small"></el-input>
      </el-form-item>
      <el-form-item label="新密码:" prop="newPass">
        <el-input v-model="ruleForm2.newPass" size="small" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认新密码:" prop="checkPass">
        <el-input v-model="ruleForm2.checkPass" size="small" type="password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" style="background:#fb9654;color:#fff" @click="passSubmit">确认修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import store from "@/store/index.js";
import { removeToken } from "@/utils/auth.js";

export default {
  data() {
    return {
      rules2: {
        oldPass: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        newPass: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
        checkPass: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
      },
      ruleForm2: {
        oldPass: "",
        newPass: "",
        checkPass: "",
      }
    };
  },
  methods: {
    //修改密码
    passSubmit() {
      this.$refs["ruleForm2"].validate((valid) => {
        if (valid) {
          let params = {
            oldPassword: this.ruleForm2.oldPass,
            newPassword: this.ruleForm2.newPass
          };
          let f = /[A-Za-z]\w{6,18}/.test(this.ruleForm2.newPass);
          if (!f) {
            this.$message.error("密码必须为字母开头的6-18位的字母和数字组合");
          }
          if (this.ruleForm2.newPass !== this.ruleForm2.checkPass) {
            this.$message.error("两次输入密码不同");
          }
          console.log(params);
          this.$api.common.changePassword(params).then((res) => {
            this.$message.success("修改成功");
            this.$api.login.loginOut()
              .then((res) => {
                if (res.code === 200) {
                  this.$store.commit("setToken", "");
                  removeToken();
                  this.$router.push({ path: "/login" });
                  location.reload(true);
                }
              })
              .catch(err => {
                removeToken();
                this.$store.commit("setToken", "");
                this.$router.push({ path: "/login" });
                location.reload(true);
              });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.myEditPass > h2 {
  height: 50px;
  border-bottom: 1px solid #e1e1e1;
  line-height: 50px;
  font-weight: normal;
  padding-left: 30px;
  font-size: 20px;
}

.myEditPass > .el-form {
  padding-left: 50px;
}

.myEditPass .el-input {
  width: 180px;
  margin-right: 20px;
}

.myEditPass .el-form-item__label {
  color: black;
  font-weight: 500;
}

.myEditPass .el-form-item {
  margin-bottom: 15px;
}
</style>
